<template>
  <div class="customMenu" ref="customMenuRef">
    <div v-if="category === 'row'">
      <div class="item">添加人</div>
    </div>
    <div v-if="category === 'row-item'">
      <div v-for="item in btnList" :key="item.name" class="item">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const vm = getCurrentInstance()
const { $http } = vm.appContext.config.globalProperties

const props = defineProps({
  dataMsg: {
    type: Object,
    default: () => {}
  },
  category: {
    type: String,
    default: () => ''
  }
})
const emit = defineEmits(['update'])

let customMenuRef = ref(null)

onMounted(() => {
  init()
})

const btnList = ref([
  {
    name: '替换人',
    type: 'row'
  },
  {
    name: '工作期',
    type: 'row'
  },
  {
    name: '自由排班',
    type: 'row'
  },
  {
    name: '删除',
    type: 'row'
  }
])

const init = () => {
  customMenuRef.value.addEventListener('click', (e) => {
    e.stopPropagation()
  })
}
</script>

<style lang="scss" scoped>
.customMenu {
  display: none;
  // position: absolute;
  position: fixed;
  background-color: #fff;
  z-index: 1000;
  border-radius: 5px;
  box-shadow: 0 0 15px #ccc;
  padding: 10px;
  .item {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 2px;
    border-bottom: 1px solid #ccc;
    transition: all 0.3s;
    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }
}
</style>
